<!--课程考核实施计划变更申请-->
<template>
  <div class="assessment-container" style="width:100%">
    <div class="search-container" style="padding-left:0px;margin:0">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>开学学期：</span>
          <el-select
            v-model="xq"
            style="width: 120px"
            clearable
            size="mini"
            placeholder="请选择"
          >
             <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.xqmc"
              :value="item.xqmc"
            >
            </el-option>
          </el-select>
          <span style="color:#fa5339;margin-left:10px">*</span>
        </div>
        <div class="search-container-item">
          <span>修习类型：</span>
          <el-select
            v-model="xxlx"
            style="width: 120px"
            size="mini"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in xxlxList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>状态：</span>
          <el-select
            v-model="zt"
            clearable
            style="width: 120px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in ztList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-button" @click="handleQuery" style="margin:2px 0 0 0">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span>查询</span>
        </div>
      </div>
    </div>
    <el-table
      :data="tableData"
      :span-method="spanLocalTable"
      class="xpaas-table-class"
      row-class-name="xpaas-row-class"
      cell-class-name="xpaas-cell-class"
      header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class"
    >
      <el-table-column label="状态/操作" align="center"><template slot-scope="scope">
        <span style="color:#ff3819" v-show="scope.row.detalestatus" v-if="+scope.row.detalestatus === 1">待提交</span>
        <span style="color:#ff3819" v-show="scope.row.detalestatus" v-if="+scope.row.detalestatus === 2">审批中</span>
        <span style="color:#51aef6" v-show="scope.row.detalestatus" v-if="+scope.row.detalestatus === 3">已审批</span>
        <div style="margin: 8px auto;width: 77px;
        height: 28px;
        line-height: 28px;
        background: #ffefef;
        border: 1px solid #fa5339;
        color:#fa5339;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;" @click="updateSubmitCouPlan(scope.row.modifyid)" v-show="scope.row.detalestatus != 3">
        <img src="../../../assets/assessment/icon-plan-record-save.png" alt="" style="width: 14px;height: 14px;margin: 0 8px 0 0;" />提交</div>
        <div style="margin: 8px auto;width: 77px;
        height: 28px;
        line-height: 28px;
        background:#f1fff8; 
        border: 1px solid #02c86c;
        color: #02c86c;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;"  @click="xgselet(scope.row,$event)">
        <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" style="width: 14px;height: 14px;margin: 0 5px 0 0;" />详情</div>
      </template></el-table-column>
      <el-table-column prop="x" align="center">
        <template slot="header">
          <div>系</div>
          <div>【教研室】</div>
        </template>
        <template slot-scope="scope">
          <div>{{ scope.row.department }}</div>
          <div>{{ scope.row.teachingandresearchsection }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="kcbh" align="center">
        <template slot="header">
          <div>课程编号</div>
          <div>【课程名称】</div>
        </template>
        <template slot-scope="scope">
          <div>{{ scope.row.coursenumber }}</div>
          <div>{{ scope.row.coursename }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="课程负责人"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.localIndex % 2 === 0">{{ scope.row.coursemanager }}</div>
          <div class="spjd" v-if="scope.row.localIndex % 2 === 1">
            <div style="position:absolute" class="spjd-title">审批进度：</div>
            <div class="time-line-horizon">
              <div class="time-line-block" style="width:355px" v-for="(block, index1) in scope.row.courageousness" :key="index1">
                <div class="person-name">{{ block.submitidentifying }}</div>
                <div class="line-content">
                  <img src="../../../assets/assessment/icon-finish.png" alt="已审批" v-if="+block.coucheckstatus === 1"/>
                  <img src="../../../assets/assessment/icon-dai.png" alt="待审批" v-if="+block.coucheckstatus === 0"/>
                  <img src="../../../assets/assessment/icon-close.png" alt="未审批" v-if="+block.coucheckstatus === -1"/>
                  <div class="date-time">
                    <span class="date">{{ block.couchecktime }}</span>
                    <span class="time">{{ block.couapplytime }}</span>
                  </div>
                </div>
                <div class="operate" v-if="index1 == 0" style="left:-75px">
                  <div class="ly-block" @click="buttonClick('留言',block,index)">
                    <img src="../../../assets/assessment/icon-ly.png" alt=""/>
                    <div class="ly">留言</div>
                  </div>
                </div>
                <div class="operate" v-show="block.checkremark" style="width:230px;" v-if="index1 === 0">
                  <div class="bubble-block" style="width: 100%;top: -66px;left: -40px;">
                    <span
                      @click="buttonClick('查看',block)"
                      style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  display: block"
                    >{{ block.checkremark }}</span>
                    <div class="operate-button">
                      <div
                        class="button-ck"
                        @click="buttonClick('查看',block)"
                        v-show="block.checkremark"
                      >
                        查看
                      </div>
                      <div
                        class="button-bj"
                        @click="buttonClick('编辑',block)"
                        v-show="block.checkremark && index1==0" 
                      >
                        编辑
                      </div>
                      <div
                        @click="buttonClick('删除',block)"
                        class="button-sc"
                        v-show="block.checkremark && index1==0" 
                      >
                        删除
                      </div>
                    </div>
                  </div>
                </div>
                <div class="operate" v-show="block.checkremark" v-if="index1 != 0" style="width:230px;">
                  <div class="bubble-block" style="width: 100%;left:-40px">
                    <span
                      @click="buttonClick('查看',block)"
                      style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  display: block"
                    >{{ block.checkremark }}</span>
                    <div class="operate-button">
                      <div
                        class="button-ck"
                        @click="buttonClick('查看',block)"
                        v-show="block.checkremark"
                      >
                        查看
                      </div>
                      <div
                        class="button-bj"
                        @click="buttonClick('编辑',block)"
                        v-show="block.checkremark && index1==0" 
                      >
                        编辑
                      </div>
                      <div
                        @click="buttonClick('删除',block)"
                        class="button-sc"
                        v-show="block.checkremark && index1==0" 
                      >
                        删除
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="changereason"
        label="变更原因"
        align="center"
      />
      <el-table-column
        prop="usualscoreratealter"
        label="课下作业比例"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{scope.row.oldusualscoreratealter}}%</span><span style="margin:0 15px">修改为</span><span style="color:#fa5339">{{scope.row.usualscoreratealter}}%</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="examscoreratealter"
        label="课堂测评所占比例"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{scope.row.oldexamscoreratealter}}%</span><span style="margin:0 15px">修改为</span><span style="color:#fa5339">{{scope.row.examscoreratealter}}%</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="midtermscoreratealter"
        label="期中考试所占比例"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{scope.row.oldmidtermscoreratealter}}%</span><span style="margin:0 15px">修改为</span><span style="color:#fa5339">{{scope.row.midtermscoreratealter}}%</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="experimentscoreratealter"
        label="课终考核所占比例"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{scope.row.oldexperimentscoreratealter}}%</span><span style="margin:0 15px">修改为</span><span style="color:#fa5339">{{scope.row.experimentscoreratealter}}%</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加留言"
      :visible.sync="showAddMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>添加留言：</div>
        <div>
          <el-input
            v-model="message.checkremark"
            type="textarea"
            :rows="8"
            style="width: 550px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="addText">确 定</button>
      </span>
    </el-dialog>
     <el-dialog
      title="编辑留言"
      :visible.sync="showbjMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>编辑留言：</div>
        <div>
          <el-input
            v-model="message.checkremark"
            type="textarea"
            :rows="8"
            style="width: 550px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="update">确 定</button>
      </span>
    </el-dialog>
    <el-dialog
      title="查看留言"
      :visible.sync="showckMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>查看留言：</div>
        <div>
          <!--                        v-model="block.bjmeaasgeText"-->
          <el-input
            v-model="message.checkremark"
            type="textarea"
            :rows="8"
            style="width: 550px"
            disabled="false"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="showckMessageDialog = false">确 定</button>
      </span>
    </el-dialog>
    <el-dialog
      title="打回原因"
      :visible.sync="showRetMessageDialog"
      width="983px"
      class="back-container"
    >
      <div class="manual-container" style="border: 1px solid #004ca7;
          line-height: 83px;
          font-size: 20px;
          color: #004ca7;
          font-weight: bold;
          vertical-align: top;
          width: 693px;
          margin-left: 100px;">
        <el-row>
          <el-col :span="12">
            <div style=" background: rgba(77, 129, 192, 0.1);">
              <span style="margin-left:30px;">打回至:</span></div>
          </el-col>
          <el-col :span="12">
            <el-radio-group v-model="reportTypep" style="margin-left:100px;">
              <el-radio
                :label="item.label"
                v-for="(item, index) in reportTypepss"
                :key="index"
                class="large"
              >{{ item.value }}
              </el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </div>
      <div class="back-textass">
        <div>打回原因：</div>
        <div>
          <el-input
            v-model="meaasgeText"
            type="textarea"
            :rows="8"
            style="width: 550px; margin-left: 30px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="textDeetle">确 定</button>
      </span>
    </el-dialog>
    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt=""/>
<!--        <span>导出Excel</span>-->
        <download-excel
          class="export-btn"
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          name="填报考核实施计划变更申请.xls"
          style="color: #f3b815"
        >
          &ensp;导出Excel
        </download-excel>
      </div>
    </div>
    <div class="pagination-block" style="position:relative;top:-45px">
     <el-pagination
        style="padding:0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { checkUpdate, docPrint, getCheckDetail, queryTeaCheck, tgRemark,insertCourseMod, } from "../../../api/courseExame/courseExa";
import { reqGetXqList } from "../../../api/classHoursAddList/addList";
import { addRemark } from "@/api/examination/approvalDelayedExam";
import { getxb,getClass,queryXBclassroom } from "@/api/course/courses";
import { mapGetters } from "vuex";
import { loadDeptListByCategory } from '@/api/dept.js';

export default {
  data() {
    return {
      xxlxList: [
        {
          value: "选修",
          label: "选修",
        },
        {
          value: "必修",
          label: "必修",
        },
      ],
      xxlx:'',
      showAddMessageDialog: false,
      showRetMessageDialog:false,
      reportTypep: "",
      reportTypepss: [
        {label: "教员", value: "教员"},
        {label: "教研室主任", value: "教研室主任"},
      ],
      total:"",
      size:10,
      current:1,
      showbjMessageDialog: false,
      showckMessageDialog: false,
      jsonFields: {  
        系: "department",
        教研室: "teachingandresearchsection",
        课程编号: "coursenumber",
        课程名称: "coursename",
        课程负责人: "coursemanager",
        变更原因:"changereason",
        课下作业比例: "usualscorerate",
        课堂测评所占比例: "examscorerate",
        期中考试所占比例: "midtermscorerate",
        课终考核所占比例: "experimentscorerate"
      },
      message: {
        text: ''
      },
      showYprDialog: false,
      selectId:"",
      xq: "",
      xqList: [],
      teald:"",
      sid:"",
      teachname:"",
      x:"",
      xList: [],
      jys:"",
      jysList: [],
      dw: "",
      dwList: [
        {
          value: "计算机教研室",
          label: "计算机教研室",
        },
        {
          value: "作战教研室",
          label: "作战教研室",
        },
      ],
     
      zt: "",
      ztList: [
        {
          value: "1",
          label: "待提交",
        },
        {
          value: "3",
          label: "已审批",
        },
        {
          value: "2",
          label: "审批中",
        },
      ],
      pid: "",
      text: "",
      courseYpr: "",
      checkedStatus: false,
      tableData: [],
      meaasgeText: "",
      course: "",
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    this.xbAll();
    this.classAll();
    this.getXqList();
    this.queryQueryTeaCheck();
  },
  methods: {
    spanLocalTable(data) {
      // console.log("data =>", data);
      let result = { rowspan: 1, colspan: 1 };
      if (data.columnIndex < 3) {
        if (0 === (data.rowIndex % 2)) {
          result = { rowspan: 2, colspan: 1 };
        } else {
          result = { rowspan: 0, colspan: 0 };
        }
      } else {
        if (1 === (data.rowIndex % 2)) {
          if (3 === data.columnIndex) {
            result = { rowspan: 1, colspan: 6 };
          } else {
            result = { rowspan: 0, colspan: 0 };
          }
        } else {
          result = { rowspan: 1, colspan: 1 };
        }
      }
      return result;
    },
    textDeetle() {
      if(this.reportTypep == "教员"){
        this.teald="1"
      }else if(this.reportTypep == "教研室主任"){
        this.teald ="2"
      }
      let obj={
        couplanid:this.sid,
        checkremark:this.meaasgeText,
        teaid :this.teald
      }
      tgRemark(obj).then((res) => {
        this.message.checkremark = this.meaasgeText
        // this.open('此操作将保存并提交, 是否继续?');
        if(res.data.code == 200){
          this.showRetMessageDialog = false
          this.queryQueryTeaCheck()
        }
      });
    },
    dhselect(){
      this.reportTypep="", this.meaasgeText="",
      this.showRetMessageDialog=true
    },
    xgselet(item,$event){
      this.$router.push({path:"/student/assessmentPlan/detail",query:{item:item}});
    },
    buttonClick(type, black, index) {
      this.message = {
        cheplanid: black.cheplanid,
        checkremark: black.checkremark,
        index: index,
        couplanid:black.couplanid
      }
      console.log(this.message)
      if (type === '留言') {
        this.message.checkremark = ''
        this.showAddMessageDialog = true
        console.log(this.message)
      } else if (type === '查看') {
        this.showckMessageDialog = true
          console.log(this.message)
      } else if (type === '编辑') {
        this.showbjMessageDialog = true
        console.log(this.message)
      } else if (type === '删除') {
        this.$confirm('此操作将删除该留言, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.textDelete(black.cheplanid)
        });
        // this.textDelete(black.cheplanid)
      }
    },
    // 获取学期院历列表
    async getXqList() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
      }
    },
    //提交
    updateSubmitCouPlan(mId) {
      insertCourseMod(mId).then(res => {
        this.$message({
          showClose: true,
          message: '提交成功',
          type: 'success'
        });
        this.queryQueryTeaCheck();
      })
      // let obj={
      //   couplanid:this.sid,
      // }
      // tgRemark(obj).then(res => {
      //   if(res.data.code == 200){
      //     this.$message({
      //       type:'success',
      //       message:'操作成功！'
      //     })
      //     this.queryQueryTeaCheck()
      //   }
      //   // this.open('此操作将保存并提交, 是否继续?');
      // });
    },
    async xbAll(){
      const xb = await getxb();
      xb.data.code == 200 ? this.xbList = xb.data.data : [];
    },
    async classAll(){
      const gClass = await getClass();
      gClass.data.code == 200 ? this.gClassList = gClass.data.data : [];
    },
    // 根据系部选中获取教研室
    async handleXb(val){
      if(val){
        const xbClass = await queryXBclassroom(val);
        xbClass.data.code == 200 ? this.gClassList = xbClass.data.data : [];
      } else {
        this.xbAll();
        this.classAll();
      }
    },
    // 教研室下拉框的改变
    handleClass(val){
      if(!val){
        this.xb ? this.handleXb(this.xb)  : this.classAll();
      }
    },
    queryQueryTeaCheck() {
      let obj = {
        termid: this.xq,
        studytype:this.xxlx,
        // traininglevel: this.teachname,
        // department: this.x,
        // designcontent: this.jys,
        // coursename: this.course,
        detalestatus: this.zt,
        pageSize :this.size,
        pageNo : this.current 
      }
      queryTeaCheck(obj).then(res => {
        let tmpOriTableData = res.data.data;
        this.tableData = [];
        console.log("tmpOriTableData =>",tmpOriTableData);
        if (null != tmpOriTableData && tmpOriTableData.length > 0) {
          this.sid = tmpOriTableData[0].courageousness[0].couplanid;
          this.total = tmpOriTableData[0].tol
          for (let i = 0; i < tmpOriTableData.length; i++) {
            tmpOriTableData[i].usualscorerate = tmpOriTableData[i].usualscorerate + "%";
            tmpOriTableData[i].examscorerate = tmpOriTableData[i].examscorerate + "%";
            tmpOriTableData[i].midtermscorerate = tmpOriTableData[i].midtermscorerate + "%";
            tmpOriTableData[i].experimentscorerate = tmpOriTableData[i].experimentscorerate + "%";
            for (let x = 0; x < tmpOriTableData[i].courageousness.length; x++) {
              let role_id = this.userInfo.role_id
              let roleId = tmpOriTableData[i].courageousness[x].couapplypeoid
              if (role_id == roleId) {
                tmpOriTableData[i].did = tmpOriTableData[i].courageousness[x].cheplanid
              }
            }
            tmpOriTableData[i].localIndex = i * 2;
            this.tableData.push(tmpOriTableData[i]);
            this.tableData.push({courageousness: tmpOriTableData[i].courageousness, localIndex: i * 2 + 1});
          }
        } else {
          this.sid = null;
          this.total = 0;
        }
      })
    },

    textUpdate(cpId) {
      getCheckDetail(cpId).then(res => {
        this.text = res.data.data.checkremark;
      });
      this.pid = cpId;
      this.showbjMessageDialog = true;
    },
    textDelete(ids) {
      let obj = {
        cheplanid: ids,
        checkremark: "",
      }
      this.showbjMessageDialog = false;
      checkUpdate(obj).then(res => {
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        });
        this.queryQueryTeaCheck();
      })
    },
    addText() {
      this.showAddMessageDialog = false;
      // this.message.checkremark = this.message.text
      let obj = {
        cheplanid: this.message.cheplanid,
        checkremark: this.message.checkremark
      }
      addRemark(obj).then(res => {
        if (res.status == 200) {
          this.showAddMessageDialog = false;
          this.queryQueryTeaCheck()
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          });
        }
      })
    },
    update() {
      this.showbjMessageDialog = false
      checkUpdate(this.message).then(res => {
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          });
          this.queryQueryTeaCheck();
        }
      });
    },
    RouterTo(path, plan) {
      this.$router.push({
        path: path,
        query: {
          planid: plan
        }
      })
    },
    handleQuery() {
      this.current = 1;
      this.queryQueryTeaCheck();
    },
    open(str) {
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.showAddMessageDialog=false
          this.$message({
            type: "success",
            message: "操作成功!",
            
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    checkAll() {
      this.tableData = this.tableData.map((item) => {
        return {...item, checked: this.checkedStatus};
      });
    },
    dewPriont(){
      docPrint(this.selectId).then(respones => {
        this.$message({
          type: 'success',
          message: '导出成功'
        })
      })
    },
  
    toChangeRecord(url) {
      this.$router.push(url);
    },
    toEditPlan() {
      this.$router.push("/teacher/assessment/editPlan");
    },
    toChangePlan() {
      this.$router.push("/teacher/assessment/changePlan");
    },
  },
};
</script>

<style lang="less">
.assessment-container {
  .choose-ypr-container {
    width: 767px;
    margin: 0px auto;

    .choose-ypr-search-container {
      .el-input--prefix .el-input__inner {
        padding-left: 30px;
      }

      .el-input__inner {
        &::placeholder {
          color: #b8b8b8;
        }

        &::-webkit-input-placeholder {
          /* WebKit browsers 适配谷歌 */
          color: #b8b8b8;
        }

        &:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 适配火狐 */
          color: #b8b8b8;
        }

        &::-moz-placeholder {
          /* Mozilla Firefox 19+ 适配火狐 */
          color: #b8b8b8;
        }

        &:-ms-input-placeholder {
          /* Internet Explorer 10+  适配ie*/
          color: #b8b8b8;
        }
      }

      display: flex;
      flex-direction: row;
      align-items: center;

      .title {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 20px;
        color: #004ca7;
        margin-right: 5px;
      }

      .search-button {
        width: 77px;
        height: 28px;
        line-height: 28px;
        background: #f1f8fe;
        border: 1px solid #51aef6;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        > span {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #51aef6;
        }

        > img {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
      }

      .button-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 21px;

        .button-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 69px;
          height: 27px;
          line-height: 27px;
          border: 1px solid #004ca7;
          border-radius: 4px;
          margin-right: 10px;
          text-align: center;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #004ca7;

          .del-icon {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 12px;
            height: 12px;
            padding: 2px;
          }
        }
      }
    }

    .choose-ypr-table-container {
      margin-top: 30px;

      .el-table td,
      .el-table th.is-leaf,
      .el-table--border,
      .el-table--group {
        border-color: #c7d7eb;
      }

      .el-table__header tr,
      .el-table__header th {
        padding: 0;
        height: 57px;
        background-color: #edf2f9;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 20px;
        color: #004ca7;
      }

      .el-table__body tr,
      .el-table__body td {
        padding: 0;
        height: 51px;
      }

      .table-data {
        width: 100%;
        border: 0.8px solid #004ca7;
        border-radius: 9px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #004ca7;
      }
    }
  }

 
  .el-dialog__footer {
    padding: 10px 20px 45px;
  }

  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
    height: 18px;
    width: 18px;
  }

  .el-checkbox__inner::after {
    height: 10px;
    left: 6px;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/planega.less";
.back-textass{
  margin-top: 33px;

  > div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }
  }
}
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: right;
}

.message-container {
  > div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }

    &:nth-child(2) {
    }
  }
}
.cz-turnback {
  background-color: #FFEFEF;
  border: 1px solid #fA5339;
  color: #FA5339;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 78px;
  height: 27px;
  line-height: 24px;
  border-radius: 4px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-align: center;
  margin-top: 10px;
  cursor: pointer;
}

        .spjd {
          .spjd-title {
            // margin: 10px 0 0 18px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #004ca7;
          }
          .time-line-horizon {
            position: relative;
            margin-left: 110px;
            display: flex;
            flex-direction: row;
            &::before {
              content: "";
              position: absolute;
              top: 35px;
              width: 915px;
              border-bottom: 2px dashed #4b78ac;
            }
            .time-line-block {
              display: flex;
              flex-direction: column;
              width: 255px;
              &:last-child {
                width: 190px;
              }
              .person-name {
                font-size: 14px;
                height: 15px;
                line-height: 15px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #004ca7;
                width: 50%;
                position: relative;
                left: -20%;
                text-align: center;
              }
              .line-content {
                display: flex;
                flex-direction: row;
                align-items: center;
                height: 40px;
                z-index: 100;
                > img {
                  width: 26px;
                  height: 26px;
                }
                .date-time {
                  display: flex;
                  flex-direction: column;
                  font-size: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #004ca7;
                  .date,
                  .time {
                    margin: 3px 8px;
                  }
                }
              }
              .operate {
                margin-top: 10px;
                position: relative;
                .ly-block {
                  cursor: pointer;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  position: relative;
                  left: -8px;
                  width: 40px;
                  > img {
                    width: 33px;
                    height: 33px;
                  }
                  .ly {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #f1b107;
                  }
                }
                .bubble-block {
                  cursor: pointer;
                  left: -30px;
                  width: 250px;;
                  height: 70px;
                  background: url(../../../assets/assessment/bubble.png) center no-repeat;
                  background-size: 100% 100%;
                  position: relative;
                  padding: 15px 10px 5px;
                  box-sizing: border-box;
                  > span {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 20px;
                    color: #004ca7;
                  }
                  .operate-button {
                    position: absolute;
                    // bottom: 1px;
                    right: 10px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    padding: 0 3px;
                    > div {
                      width: 37px;
                      box-sizing: border-box;
                      background: #fff6dc;
                      border: 1px solid #f1b107;
                      border-radius: 4px;
                      margin-left: 6px;
                      font-size: 12px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #f1b107;
                      text-align: center;
                    }
                    .button-ck {
                      background: #fff6dc;
                      border: 1px solid #f1b107;
                      color: #f1b107;
                    }
                    .button-bj {
                      background: #ffefef;
                      border: 1px solid #fa5339;
                      color: #fa5339;
                    }
                    .button-sc {
                      background: #f1f8fe;
                      border: 1px solid #51aef6;
                      color: #51aef6;
                    }
                  }
                }
              }
            }
          }
        }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    margin: 10px 0 0 0;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
</style>
